<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小程序添加商品</title>
    <link href="../assets/css/layer.css"  />
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="../assets/css/bootstrapValidator.min.css" />
</head>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<style>

    h4{
        color: #6379BA;
        padding: 10px;
    }

    .input{
        color: red;
    }

    .img-thumbnail {
        width: 100px !important;
        height: 100px !important;
    }

    .close{
        float: right;
        font-size: 21px;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        filter: alpha(opacity=20);
        opacity: .2;
    }

    .multi-item{
        float: left;
    }
   /* body{background:#F1F1F1;}*/
</style>
<body>

<div class="form-content">
    <form id="form-user-add" class="form-horizontal">
        <input name="deptId" type="hidden" id="treeId"/>
        <hr />
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-xs-4 control-label"><span style="color: red; ">*</span>商品名称：</label>
                    <div class="col-xs-4" id="userId">
                        <input name="goodsName"    placeholder="请输入商品名称" class="form-control" type="text" maxlength="20" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-xs-4 control-label"><span style="color: red; ">*</span>商品编码：</label>
                    <div class="col-xs-4">
                        <input name="goodsSerial" class="form-control email" type="text" maxlength="50" placeholder="请输入商品编码" >
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-xs-4 control-label"><span style="color: red; ">*</span>副标题：</label>
                    <div class="col-xs-4">
                        <input name="title" placeholder="请输入商品标题" maxlength="30" class="form-control" type="text"  >
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-xs-4 control-label"><span style="color: red; ">*</span>商品价格：</label>
                    <div class="col-xs-4 col-xs-12">
                        <div class="input-group">
                            <input type="text" name="salesPrice" id="marketprice" class="form-control" value=""/>
                            <span class="input-group-addon">元 原价</span>
                            <input type="text" name="originalPrice" id="productprice" class="form-control" value=""/>
                            <span class="input-group-addon">元 成本</span>
                            <input type="text" name="thePrice" id="costprice" class="form-control" value=""/>
                            <span class="input-group-addon">元</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-xs-4 control-label"><span style="color: red; ">*</span>商品规格：</label>
                    <div class="col-xs-4 col-xs-12">
                        <div class="input-group">
                            <input name="speciFications" type="text" id="part" class="form-control" value=""/>
                            <span class="input-group-addon">单位:份/件/斤</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-xs-4 control-label"><span style="color: red; ">*</span>商品分类：</label>
                    <div class="col-xs-4">
                        <div class="input-group" style="width: 100%">
                            <select  name="goodsType" class="form-control goodsType">
                             <!--<option value="0">商品分类</option>-->
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-xs-4 control-label"><span style="color: red; ">*</span>商品库存：</label>
                    <div class="col-xs-4">
                        <input  name="goodsNum" placeholder="请输入商品数量"  class="form-control" type="text" maxlength="16" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                        <div class="form-group" >
                            <label class="col-xs-4 control-label  top-4"><span style="color: red; ">*</span>商品图片：</label>
                            <div class="col-xs-4  gimgs">
                                <label lfor="flieImg" class="input-group FlieImg">
                                    <input name="img" type="text" class="form-control" readonly="readonly" value="" placeholder="上传图片">
                                    <span class="input-group-btn">
            <button class="btn btn-default" type="button" onclick="">选择图片</button>
            <input type="hidden" value="thumbs"/></span></label>
                                <input  id="FlieImg" type="file" accept=".jpg;.png"  style="display:none;"/>
                                <div id="ImgBox2" class="input-group multi-img-details"></div>
                                <span class="help-block image-block"></span> </div></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group" >
                <label class="col-xs-4 control-label  top-4"><span style="color: red; ">*</span>详情图片：</label>
               <div class="col-xs-4  gimgs">
                   <label lfor="detailsImg" class="input-group detailsImg">
                        <input type="text" class="form-control" readonly="readonly" value="" multiple placeholder="上传详情图片">
                       <span class="input-group-btn">
            <button class="btn btn-default" type="button" onclick="">选择图片</button>
            <input type="hidden" value="thumbs"/></span></label>
                    <input id="detailsImg"  name="imgs" accept=".jpg;.png" type="file" multiple style="display:none;"/>
                    <div id="detailsImgBox" class="input-group multi-img-details"></div>
                    <span class="help-block image-block"></span></div></div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-xs-4 control-label">已出售数量：</label>
                    <div class="col-xs-4">
                        <input name="sellNum" placeholder="请输入已出售数量"  class="form-control" type="text" maxlength="16" required><br>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

<script src="../assets/js/jquery-3.4.1.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrapValidator.min.js"></script>
<!-- <script src="../assets/js/pages-js/InternalEmployees.js" charset="utf-8"></script>-->
<script src="../assets/layui/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="../assets/js/layer.js"></script>
</body>

<script type="text/javascript">


    $(function () {
       // queryWxGoodsType();
    });



    $("input[name='file']").on("click",function () {
       var file= document.getElementById("images").files
        alert(JSON.stringify(file));
    });

  $(".close").on("click",function () {
     $(this).parent().remove();
  });
    var ImgArr = [];
    var detailsArr = [];  //详情图片数组
    //产品图片上传
    function FlieImg() {
      //产品图片数组
        $(".FlieImg").click(function () {
            $('#FlieImg').click();
        })
        $("#FlieImg").on("change", function () {
            uploadingImg(this, function (url) {
                imgLook(url);
            }, function (res) {
                ImgArr.push(res);
            });
            function imgLook(imgPath) {
                var html = '<div class="multi-item" ><img class="img-responsive img-thumbnail" src=' + imgPath
                    + '><em name="closeimgarr" class="close" title="删除这张图片">×</em></div>';
                $("#ImgBox2").append(html);
            }
            $("#ImgBox2").on("click", "[name=closeimgarr]", function () {
                ImgArr.splice($(this).parents("div.multi-item").index(), 1);
                $(this).parents("div.multi-item").remove();
            });
        });
    }
    FlieImg();


    //详情图片上传
    function detailsImg() {
        var html="";
        $(".detailsImg").click(function () {
            $('#detailsImg').click();
        })
        $("#detailsImg").on("change", function () {
            uploadingImg(this, function (url) {
                imgLook(url);
            }, function (res) {
                detailsArr.push(res);
            });
            function imgLook(imgPath) {
                html += '<div class="multi-item" ><img class="img-responsive  img-thumbnail"  src=' + imgPath + '><em name="closeimgarr" class="close" title="删除这张图片">×</em></div>';
                $("#detailsImgBox").html(html);
            }
            $("#detailsImgBox").on("click", "[name=closeimgarr]", function () {
                detailsArr.splice($(this).parents("div.multi-item").index(), 1);
                $(this).parents("div.multi-item").remove();
            });
        });
    }
    detailsImg();

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
    (function (jQuery, layer) {
        this.jq = jQuery;
        this.lay = layui.layer;
        this.uploadingImg = function (d, docurl, callback) {
            /*
         * 图片上传
         * d 传入当前改变的files对象
         * docurl 选择图片时获取到的系统图片路径回调
         * callback 接收到回调数据后的回调操作
         * */
            var $ = this.jq, imgInfo = $(d).prop('files')[0], lay = this.lay; //load = lay.load(1, {shade: [0.01, '#fff']});
            var getObjectURL = function (file) {
                var url = null;
                if (window.createObjectURL != undefined) { /*basic*/
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { /*mozilla(firefox)*/
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { /*webkit or chrome*/
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            };
            if (imgInfo != undefined) {
                if (/(.jpg|.jpeg|.gif|.png|.bmp|.txt)$/.test(imgInfo.name)) {
                    var imgPath = getObjectURL(imgInfo),  imgformdata = new FormData();
                    imgformdata.append("file", imgInfo);
                    $.ajax({
                        url: "/upImgController/headImgUpload", type: "post", dateType: "json"
                        , cache: false, processData: false, contentType: false, data: imgformdata
                        , success: function (res) {
                           // layer.close(load);
                            //res = JSON.parse(JSON.parse(res));
                            res=JSON.parse(res);
                            docurl(imgPath);
                            callback(res.data);
                            layer.msg("上传成功", {time: 1300});
                        }
                        , error: function () {
                            layer.msg("上传失败", {time: 1300});
                        }
                    });
                    $(d).val("");
                } else {
                    layer.msg("请上传正确的图片格式<br/>(*.jpg,*.jpeg,*.gif,*.png,*.bmp)", {time: 1300});
                }
            }
        };
    })(jQuery, layer);
   });

    function queryWxGoodsType() {
        $.ajax({
            type:"get",
            url:"/wxGoods/queryWxGoodsType",
            success:function (result) {
               //var goodsType="";
                $.each(result,function (i,r) {
                     var  goodsType = '<option value='+r.id+'>'+r.goods_type_name+'</option>';
                    $(".goodsType").append(goodsType);
                });
            }
        });
    }

    function addWxGoods() {
        var goodsName = $("input[name='goodsName']").val();
        var goodsSerial = $("input[name='goodsSerial']").val();
        var title = $("input[name='title']").val();
        var salesPrice = $("input[name='salesPrice']").val();
        var originalPrice = $("input[name='originalPrice']").val();
        var thePrice = $("input[name='thePrice']").val();
        var speciFications = $("input[name='speciFications']").val();
        var goodsType = $("select[name='goodsType']").val();
        var goodsNum = $("input[name='goodsNum']").val();
        var sellNum = $("input[name='sellNum']").val();
        if(goodsName!=""&&title!=""&&speciFications!=""&&goodsType!=""&&goodsNum!="")
        {

            $.post("/wxGoods/addWxGoods", {
                goodsName:goodsName,
                goodsSerial:goodsSerial,
                title:title,
                salesPrice:salesPrice,
                originalPrice:originalPrice,
                thePrice:thePrice,
                speciFications:speciFications,
                goodsType:goodsType,
                goodsNum:goodsNum,
                img:JSON.stringify(ImgArr),
                imgs:JSON.stringify(detailsArr),
                sellNum:sellNum
            }, function (result) {
                if (result>0) {
                    layer.msg('添加商品信息成功！',function() {time:1});
                    setInterval(function(){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    },1000);
                } else {
                    layer.msg("添加商品信息失败！");
                }
            });
        }else {
            layer.msg("商品信息不能为空哦！");
        }
    }


    function getWxGoodsType(gid) {
        $.ajax({
            type:"get",
            url:"/wxGoods/queryWxGoodsType",
            success:function (result) {
                var   goodsType="";
                $.each(result,function (i,r) {
                    if(gid==r.id)
                    {
                        goodsType += '<option value='+r.id+'  selected="selected">'+r.goods_type_name+'</option>';
                    }else
                    {
                        goodsType += '<option value='+r.id+'>'+r.goods_type_name+'</option>';
                    }
                });
                $(".goodsType").html(goodsType);
            }
        });
    }


    function getWxGoodsInfo(id) {
        var arr=[];
        var arrs=[];
        $.ajax({
            type:"get",
            url:"/wxGoods/queryWxGoodsById?id="+id,
            success:function (result) {
                //alert(JSON.stringify(result));
                var html="";
                var htmls="";
                $.each(result,function (i,r) {
                    $("input[name='goodsName']").val(r.goods_name);
                    $("input[name='goodsSerial']").val(r.goods_serial) ;
                    $("input[name='title']").val(r.title) ;
                    $("input[name='originalPrice']").val(r.original_price) ;
                    $("input[name='thePrice']").val(r.the_price) ;
                    $("input[name='speciFications']").val(r.speci_fications) ;
                    $("input[name='goodsNum']").val(r.goods_num) ;
                    $("input[name='sellNum']").val(r.sell_num) ;
                    $("input[name='salesPrice']").val(r.sales_price) ;
                    ImgArr= r.img.split(",");
                    detailsArr= r.imgs.split(",");
                });
                    for (var i=0,len=ImgArr.length;i<len;i++)
                    {
                        html += '<div class="multi-item" ><img class="img-responsive  img-thumbnail"  src=' + ImgArr[i] + '><em name="closeimgarr" class="close" title="删除这张图片">×</em></div>';
                    }
                    $("#ImgBox2").html(html);
                    for (var  j=0,lens=detailsArr.length;j<lens;j++)
                    {
                    htmls += '<div class="multi-item" ><img class="img-responsive  img-thumbnail"  src=' + detailsArr[j] + '><em name="closeimgarr" class="close" title="删除这张图片">×</em></div>';
                    }
                    $("#detailsImgBox").html(htmls);
            }
        });
    }

    $("#ImgBox2").on("click", "[name=closeimgarr]", function () {
        ImgArr.splice($(this).parents("div.multi-item").index(), 1);
        $(this).parents("div.multi-item").remove();
    });

    $("#detailsImgBox").on("click", "[name=closeimgarr]", function () {
        detailsArr.splice($(this).parents("div.multi-item").index(), 1);
        $(this).parents("div.multi-item").remove();
    });



    function updateWxGoods(id) {
        var goodsName = $("input[name='goodsName']").val();
        var goodsSerial = $("input[name='goodsSerial']").val();
        var title = $("input[name='title']").val();
        var salesPrice = $("input[name='salesPrice']").val();
        var originalPrice = $("input[name='originalPrice']").val();
        var thePrice = $("input[name='thePrice']").val();
        var speciFications = $("input[name='speciFications']").val();
        var goodsType = $("select[name='goodsType']").val();
        var goodsNum = $("input[name='goodsNum']").val();
        var sellNum = $("input[name='sellNum']").val();
            $.post("/wxGoods/updateWxGoodsById", {
                goodsName:goodsName,
                goodsSerial:goodsSerial,
                title:title,
                salesPrice:salesPrice,
                originalPrice:originalPrice,
                thePrice:thePrice,
                speciFications:speciFications,
                goodsType:goodsType,
                goodsNum:goodsNum,
                img:JSON.stringify(ImgArr),
                imgs:JSON.stringify(detailsArr),
                sellNum:sellNum,
                id:id
            }, function (result) {
                if (result>0) {
                    layer.msg('修改商品信息成功！',function() {time:1});
                    setInterval(function(){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    },1000);
                } else {
                    layer.msg("修改商品信息失败！");
                }
            });
    }
</script>
</html>
